<template>
  <div class="page-box">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>Wallet</span>
          <el-link
            type="primary"
            href="https://docs.ethers.io/v5/api/signer/#Wallet--properties"
            target="_blank"
            >Docs</el-link
          >
        </div>
      </template>
      <div class="card-content">
        <div class="item">
          <el-row :gutter="20">
            <el-col :lg="12" :sm="24">
              <p class="title">1. 创建钱包</p>
              <f-code :code="codeRandomWallet" />
            </el-col>
            <el-col :lg="12" :sm="24">
              <el-button type="primary" @click="handleCreateWallet">创建钱包</el-button>
              <el-alert type="success" :closable="false" v-if="wallet.address != ''">
                <span>Address: </span><span>{{ wallet.address }}</span> <br />
                <span>privateKey: </span><span>{{ wallet.privateKey }}</span>
              </el-alert>
            </el-col>
          </el-row>
        </div>
        <div class="item">
          <el-row :gutter="20">
            <el-col :lg="12" :sm="24">
              <p class="title">2. 通过助记词创建钱包</p>
              <f-code :code="codeMnemonicWallet" />
            </el-col>
            <el-col :lg="12" :sm="24">
              <el-button type="primary" @click="handleCreateMnemonic">生成助记词</el-button>
              <div class="m-grid" v-if="mnemonic != ''">
                <el-tag v-for="item in mnemonic.split(' ')" :key="item" type="info">{{
                  item
                }}</el-tag>
              </div>
              <el-button type="primary" @click="handleCreateMnemonicWallet"
                >助记词生成钱包</el-button
              >
              <el-alert type="success" :closable="false" v-if="mWallet.address != ''">
                <span>Address: </span><span>{{ mWallet.address }}</span> <br />
                <span>privateKey: </span><span>{{ mWallet.privateKey }}</span>
              </el-alert>
            </el-col>
          </el-row>
        </div>
        <div class="item">
          <el-row :gutter="20">
            <el-col :lg="12" :sm="24">
              <p class="title">3. 创建加密钱包</p>
              <f-code :code="codeEncryptWallet" />
            </el-col>
            <el-col :lg="12" :sm="24">
              <el-button type="primary" @click="handleEncryptWallet">创建钱包</el-button>
              <div v-if="progressValue > 0"><el-progress :percentage="progressValue" /></div>
              <f-code :code="keystore" v-if="keystore != ''" />
            </el-col>
          </el-row>
        </div>
        <div class="item">
          <el-row :gutter="20">
            <el-col :lg="12" :sm="24">
              <p class="title">3. 解密加密钱包</p>
              <f-code :code="codeFromEncryptedJson" />
            </el-col>
            <el-col :lg="12" :sm="24">
              <!-- <el-button type="primary" @click="handleFromEncryptedWallet">解密钱包</el-button>
              <div v-if="progressValue2 > 0"><el-progress :percentage="progressValue2" /></div>
              <el-alert type="success" :closable="false" v-if="fWallet.address != ''">
                <span>Address: </span><span>{{ fWallet.address }}</span> <br />
                <span>privateKey: </span><span>{{ fWallet.privateKey }}</span>
              </el-alert> -->
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import FCode from '@/components/f-code/index.vue'
import { encryptWallet, fromEncryptedJson, mnemonicWallet, randomWallet } from '@/hooks/wallet'
import {
  createEncryptWallet,
  createMnemonic,
  createMnemonicWallet,
  createRandomWallet,
  type WalletType,
} from '@/utils/wallet'
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { exportFile } from '@/utils'

const codeRandomWallet = ref(randomWallet)
const codeMnemonicWallet = ref(mnemonicWallet)
const codeEncryptWallet = ref(encryptWallet)
const codeFromEncryptedJson = ref(fromEncryptedJson)

let wallet = ref<WalletType>({
  address: '',
  privateKey: '',
})

function handleCreateWallet() {
  wallet.value = createRandomWallet()
}

const mnemonic = ref('')
function handleCreateMnemonic() {
  mnemonic.value = createMnemonic()
}
let mWallet = ref<WalletType>({
  address: '',
  privateKey: '',
})
function handleCreateMnemonicWallet() {
  mWallet.value = createMnemonicWallet(mnemonic.value)
}

let keystore = ref('')
let progressValue = ref(0)
function handleEncryptWallet() {
  if (progressValue.value > 0) return
  ElMessageBox.prompt('Please input your password', 'Tip', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    inputType: 'password',
  })
    .then(async ({ value }) => {
      const wallet = await createEncryptWallet(value, (progress: number) => {
        progressValue.value = parseInt(progress * 100 + '')
      })
      const data = JSON.parse(wallet)
      keystore.value = JSON.stringify(data, null, 4)
      exportFile(keystore.value, `${data.address}.json`)

      setTimeout(() => {
        progressValue.value = 0
      }, 1000)
    })
    .catch(() => {})
}
</script>

<style scoped lang="less">
.m-grid {
  display: grid;
  margin: 16px 0;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}
</style>
